<template>
  <div id="add-article" v-loading="loading">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章</el-breadcrumb-item>
      <el-breadcrumb-item>发布文章</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form ref="form" :model="form" inline>
        <el-form-item>
          <el-button v-if="id" type="primary" size="small" @click="submit">修改</el-button>
          <el-button v-else type="primary" size="small" @click="submit">发布</el-button>
        </el-form-item>
        <el-form-item label="发布类型:">
          <el-tag :key="tag" v-for="tag in form.label" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        </el-form-item>
        <el-form-item label="发布标题:">
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="封面">
          <el-upload class="avatar-uploader" action="/api/private/v1/upload"
            :show-file-list="false" :on-success="handleAvatarSuccess" drag :header="user.token">
            <!-- :before-upload="beforeAvatarUpload" -->
            <img v-if="form.cover_url" :src="form.cover_url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <mavon-editor @change="changeMavon" v-model="mdContent" ref='md' @imgAdd="$imgAdd" />

        </el-form-item>
        <!-- 隐藏项 -->
        <el-form-item>
          <el-input v-model="form.page" name="page" type="hidden"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.id" name="id" type="hidden"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'addRelease',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  data () {
    return {
      mdContent: '',
      loading: false,
      username: '',
      form: {
        id: this.id,
        title: '',
        content: '',
        label: [],
        cover_url: '',
        userId: ''
      },
      // myhtml: "",
      defaultData: 'preview',
      timeValue: '',
      inputVisible: false,
      inputValue: ''

    }
  },
  created () {
    // this.form.page = this.$router.query.CurPage;
    this.getAricle()
    this.form.userId = this.user.id
    this.handleCreated()
  },
  methods: {
    async getAricle () {
      if (this.id) {
        this.loading = true
        const res = await this.$http.get('/article/findArticleById?articleId=' + this.id)
        var article = res.data.result[0]
        this.form.id = article.id
        this.form.title = article.title
        this.form.content = article.content
        this.form.cover_url = article.cover_url
        this.form.label = article.labels.map(v => {
          return v.label
        })
        this.loading = false
      }
    },

    async submit () {
      if (!this.id) {
        const { data: res } = await this.$http.post('/article/createArticle', this.form)
        if (res.code === 0) {
          this.$message.success('发布成功')
          this.form.title = ''
          this.form.content = ''
          this.mdContent = ''
          this.form.id = null
          this.form.label = null
          this.form.cover_url = null
        }
      } else {
        const { data: res } = await this.$http.post('/article/editArticle', this.form)
        console.log(res)
        if (res.code === 0) {
          this.$message.success('修改成功')
          this.form.title = ''
          this.form.content = ''
          this.form.id = null
          this.form.label = null
          this.form.cover_url = null
        }
      }
    },
    handleClose (tag) {
      this.form.label.splice(this.form.label.indexOf(tag), 1)
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm () {
      const inputValue = this.inputValue
      if (inputValue) {
        this.form.label.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleAvatarSuccess (res, file) {
      // console.log(res)
      this.$message.success('上传成功')
      this.form.cover_url = res.data.path
    },
    $imgAdd (pos, file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append('file', file)
      this.$http({
        url: '/upload',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then((res) => {
        this.$refs.md.$img2Url(pos, res.data.result.path.replace(/\\/g, '/'))
      })
    },
    changeMavon () {
      this.form.content = this.$refs.md.d_render
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#add-article {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    // display: block;
  }

  .el-breadcrumb {
    margin: 10px 0;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
